<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>



<title>gravitas3.0</title>
<!--gravity experiment program-->
<!--
This is a gravity dropping box program
Allowing you to manipulate gravity of a falling object
-->

</head>
<body style="font-family:Arial;background-color:#fff;">


<div id="wrap" style="width:800px;height:600px;background-color:#888;padding:0px;margin:auto;border:1px solid #333;overflow:hidden;">

<div id="menu" style="float:right;height:800px;width:200px;background-color:#553;color:#ff9;padding:10px;display:block">
<input type="button" value="DROP" onclick="handleDropButton();"/>
<input type="button" value="RESET" onclick="handleResetButton();"/>
</div>

<img id="box" style="position:relative;top:100px;left:50px;height:72px" src="box0.png"/>

</div>

<div id="notes" style=" width:780px;height:30px;background-color:#c64;margin:auto;padding:10px;border:1px solid #333;color:#fdb;">
greetings earthling
</div>

<script src="transforms.js"></script>
<script type="text/javascript">

//suenolines@gmail.com

var notes = document.getElementById('notes');
var wrap = document.getElementById('wrap');
wrap.H	= parseInt(wrap.style.height);
var box = document.getElementById('box');
box.initTop = parseInt(box.style.top);
box.initLeft = parseInt(box.style.left);
box.H		= parseInt(box.style.height);
box.isAnimating = false;
box.isReset	= true;
var xforms	= new transforms();

var gravity	= 9.8;
var pixPM	= 200;
var initV	= -2;
var horV	= 2;

function dropBox(startT){

 	
	var cur = +new Date;
	var dif = (cur-startT)/1000;
	//  d = Vi*t + 1/2*g*t*t
	var d = initV*pixPM*dif + .5*gravity*pixPM*dif*dif;

	if(box.initTop+d < wrap.H-parseInt(box.style.height)){

		var l = horV*pixPM*dif;
		box.style.top = Math.round(box.initTop + d) + 'px';
		box.style.left = Math.round(box.initLeft + l) + 'px';

		setTimeout(function(){dropBox(startT)}, 0);

	}else{
		box.style.top = 4 + wrap.H - parseInt(box.style.height) + 'px';
		box.isReset	= false;
		box.isAnimating = false;
		box.src = 'box0.png';
		notes.innerHTML = 'box done dropping';
	}

}

function shrinkBox(start, dur){

	var cur = +new Date;
	var per = (cur-start)/dur;

	if(per >= 1){
	
	 	box.style.top = box.initTop + 'px';
		box.style.left = box.initLeft + 'px';
		box.style.height = box.H + 'px';
		box.style.width  = box.H + 'px';
		notes.innerHTML = 'RESET';
		regrowBox(+new Date, 1000);

	}else{
		var tmpPer = xforms.popIn(per,1.2,.3);
		var tmpH   = parseInt(box.H*tmpPer);
		var tmpTop = parseInt(box.initTop  + ((box.H-tmpH)/2));
		var tmpLft = parseInt(box.initLeft + ((box.H-tmpH)/2));
		box.style.top  = tmpTop + 'px';
		box.style.left = tmpLft + 'px';
		box.style.height = tmpH +'px';
		box.style.width  = tmpH +'px';
		setTimeout(function(){shrinkBox(start, dur)}, 0);
	}

}

function regrowBox(start, dur){
	box.isReset = true;
	box.isAnimating = false;
	/*
	box.style.top = box.initTop +'px';
	box.style.left = box.initLeft +'px';
	box.style.height = box.H +'px';
	box.style.width  = box.H +'px';
	alert('regrowing\n\n'+box.style.height);
	*/
}

function handleDropButton(){
	if(box.isAnimating == false && box.isReset){
		notes.innerHTML = 'dropping ...';
		box.isAnimating = true;
		box.src = 'box1.png';
		dropBox(+new Date);
	}
}

function handleResetButton(){
	if(box.isAnimating == false && !box.isReset){
		box.isAnimating = true;
		box.src = 'box0.png';
		box.style.top = box.initTop + 'px';
		box.style.left = box.initLeft + 'px';
		shrinkBox(+new Date, 800);
	}
}


</script>


</body>
</html>
